<template>
  <section class="root_login">
    <div class="root_login_main">
      <div class="title">
        <el-avatar shape="square" :size="50" :src="imgDict.logo" />
        <h1 class="name">忘记密码</h1>
      </div>
      <el-form ref="form" :model="form" :rules="rules" class="content">
        <el-form-item prop="phone">
          <el-input
            v-model="form.username"
            prefix-icon="el-icon-user"
            :placeholder="`${config.root.input}${config.login.username}`"
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            prefix-icon="el-icon-lock"
            :placeholder="`${config.root.input}${config.login.password}`"
            size="medium"
            type="password"
            @keyup.enter.native="save"
          ></el-input>
        </el-form-item>
        <el-form-item prop="newPassword">
          <el-input
            v-model="form.newPassword"
            prefix-icon="el-icon-lock"
            :placeholder="`${config.root.input}${config.login.newPassword}`"
            size="medium"
            type="password"
            @keyup.enter.native="save"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-button"
            type="primary"
            size="medium"
            @click="save"
            :loading="loading"
            >提交</el-button
          >
        </el-form-item>
        <el-form-item class="login-other">
          <div class="attr transition" @click="link('/login')">去登录</div>
        </el-form-item>
      </el-form>
    </div>
  </section>
</template>

<script>
import imgDict from "@/utils/img";
import Mixin from "@/mixins/form";

export default {
  name: "forgetPassword",
  mixins: [Mixin],
  components: {},
  filters: "",
  data() {
    return {
      imgDict, // 图片
      loading: false, // 按钮loading
      form: {
        username: "", // 登录名
        password: "", // 密码
        newPassword: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: `${this.config.root.input}${this.config.login.username}`,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: `${this.config.root.input}${this.config.login.password}`,
            trigger: "blur",
          },
        ],
        newPassword: [
          {
            required: true,
            message: `${this.config.root.input}${this.config.login.newPassword}`,
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    // 保存
    async save() {
      const status = this.$formValidate();
      if (!status) {
        return;
      }
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$router.replace("/login");
      }, 1000);
    },
    // 跳转
    link(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style lang="scss" scoped>
.root_login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 50px);

  .root_login_main {
    box-shadow: 0 0 10px $shadow;
    background-color: $white;
    position: relative;
    padding: 30px;
    height: 414px;
    width: 414px;

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-top: 207px solid $mc;
      border-right: 414px solid transparent;
    }

    .title {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;

      .name {
        margin-left: 10px;
        font-size: 18px;
        color: $white;
      }
    }

    .content {
      position: relative;
      margin-top: 60px;
      z-index: 10;

      .login-button {
        display: block;
        width: 100%;
      }

      .login-other {
        margin-bottom: 0;
        cursor: pointer;

        ::v-deep .el-form-item__content {
          display: flex;
          align-items: center;

          .attr {
            width: 100%;

            &:hover {
              color: $mc;
            }

            & + .attr {
              text-align: right;
            }
          }
        }
      }
    }
  }
}
</style>
